<template>
  <!-- 关联项目 -->
  <custom-modal
    width="600px"
    :visible="visible"
    :title="$t('linkedRole')"
    :destroyOnClose="true"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="resetData"
  >
    <s-table
      :columns="columns"
      :data-source="lists"
      :loading="loading"
      :show-pagination="false"
      ref="table"
      style="height:420px;"
    >
      <template #name="text">
        <table-ellipsis :text="text || '-'"></table-ellipsis>
      </template>
      <template #createTime="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
      </template>
    </s-table>
  </custom-modal>
</template>
<script>
import CustomModal from '@/components/CustomModal/index.vue'
import { STable } from '@/components'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
export default {
  components: {
    CustomModal,
    STable,
    tableEllipsis
  },
  props: {
  },
  computed: {
    lists () {
      let roles = this.$store.state.user.userInfo.roles;
      roles.forEach(role=>{
        role.userName=this.$store.state.user.userInfo.name
      })
      return roles
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      tbData: [],
      columns: [
        {
          title: this.$t('userName'),
          dataIndex: 'userName',
          scopedSlots: { customRender: 'userName' },
          width: 100
        },
        {
          title: this.$t('roleName'),
          dataIndex: 'name',
          scopedSlots: { customRender: 'roleName' },
          width: 200
        }, {
          title: this.$t('linkedTime'),
          dataIndex: 'relTime',
          scopedSlots: { customRender: 'createTime' },
          special: true,
          width: 200
        }]
    }
  },
  methods: {
    handleSubmit () {
      this.resetData()
    },
    resetData () {
      this.visible = false
    },
    switchVisible (val) {
      this.visible = val
    }
  }
}
</script>
